<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>通讯录</title>
    <link rel="stylesheet" href="<c:url value="/static/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" />" type="text/css">
	<link rel="stylesheet" href="<c:url value="/static/plugins/zTree_v3/css/zTreeStyle/style.css" />" type="text/css">
	<script type="text/javascript" src="<c:url value="/static/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js" />"></script>
	<script type="text/javascript" src="<c:url value='/static/js/admin/qiye/dept/book.js' />"></script>
</head>
<body>
<div class="line">
	<div class="x3">
		<div class="panel admin-panel">
			<div class="panel-head"><strong>组织架构</strong></div>
			<div id="treeBody" class="padding" style="min-height: 150px;">
				<div class="zTreeDemoBackground left">
					<ul id="deptTree" class="ztree"></ul>
				</div>
			</div>
		</div>
	</div>
	<div class="x9">
		<div class="panel admin-panel margin-left">
			<div class="panel-head"><strong><span id="deptTableTitle"></span>全部成员</strong></div>
			<div id="tableBody" style="min-height: 150px;">
				<form class="form">
					<div class="padding border-bottom">
				      	<div class="line">
					       	<div class="x12">
						        <input type="button" class="button button-small checkall" name="checkall" checkfor="id" value="全选" />
						        <input onclick="addPerson()" type="button" class="button button-small border-green" value="添加成员" />
						        <input onclick="deleteBatchPerson()" type="button" class="button button-small border-yellow" value="批量删除" />
						        <input onclick="importBatchPerson()" type="button" class="button button-small border-blue" value="批量导入" />
					    	</div>
				    	</div>
				    </div>
					<table id="user-table" class="table table-hover">
				       	<tr>
				       		<th width="30" style="text-align: center;"></th>
				       		<th width="30" style="text-align: center;"></th>
				        	<th width="80">姓名</th>
				        	<th width="100" style="text-align: center;">账号</th>
				        	<th width="*" style="text-align: center;">职位</th>
				        	<!-- <th width="100" style="text-align: center;">手机</th> -->
				        	<!-- <th width="*" style="text-align: center;">邮箱</th> -->
				        	<th width="80" style="text-align: center;">
				        		<div class="field">
								<select id="status" style="width: 70px;" >
									<option value="0">状态</option>
				    				<option value="1">已关注</option>
				    				<option value="2">已冻结</option>
				    				<option value="4">未关注</option>
								</select>
								</div>
				        	</th>
				        	<th width="200" style="text-align: center;">操作</th>
				       	</tr>
				    </table>
				</form>
			</div>
		</div>
	</div>
</div>

<div id="dept-body" style="display: none;">
	<div class="dialog-mask" style="z-index:10000"></div>
	<div class="dialog-win" style="position:fixed; width:500px; height:500px; z-index:10001; left:50%; top:50%;margin-left: -250px;margin-top: -165px; ">
		<div class="dialog open">
			<form id="dept-form" class="form">
				<div class="dialog-head">
					<span id="dept-close" class="close"></span>
					<strong id="dept-title">部门信息</strong>
				</div>
				<div class="dialog-body">
					<div id="dept-content" style="height:200px; overflow: auto;">
						<div class="form-group">
							<div class="label">
								<label>上级部门</label>
							</div>
							<div class="field">
								<div id="parentDept" style="min-height: 30px;"></div>
							</div>
						</div>
						<div class="form-group">
							<div class="label">
								<label for="marketPrice">部门名称</label>
							</div>
							<div class="field">
								<input type="text" class="input" id="deptName"
								placeholder="请填写部门名称，不能超过32个字" data-validate="required:必填,length#<=32:不能超过32个字"/>
							</div>
						</div>
					</div>
				</div>
				<div class="dialog-foot">
					<button id="dept-save" type="button" class="button bg-green">保存</button>
					<button id="dept-cancel" type="button" class="button dialog-close">关闭</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div id="person-body" style="display: none;">
	<div class="dialog-mask" style="z-index:10000"></div>
	<div class="dialog-win" style="position:fixed; width:800px; height:500px; z-index:10001; left:50%; top:50%;margin-left: -400px;margin-top: -265px; ">
		<div class="dialog open">
			<form id="person-form" class="form">
				<div class="dialog-head">
					<span id="person-close" class="close"></span>
					<strong id="person-title">成员信息</strong>
				</div>
				<div class="dialog-body">
					<div id="person-content" style="height:400px;overflow: auto;">
						<div class="line">
							<div class="x5">
								<div class="form-group">
									<div class="label">
										<label>姓名</label>
									</div>
									<div class="field">
										<input type="text" class="input" id="personName"
										placeholder="请填写姓名，不能超过32个字" data-validate="required:必填,length#<=32:不能超过32个字"/>
									</div>
								</div>
							</div>
							<div class="x1"></div>
							<div class="x6">
								<div class="form-group">
									<div class="label">
										<label>账号</label>
									</div>
									<div class="field">
										<input type="text" class="input" id="personUserid"
										placeholder="成员唯一标识，不可更改，不支持中文" data-validate="required:必填,length#<=32:不能超过32个字"/>
									</div>
								</div>
							</div>
						</div>
						<hr/>
						<div class="margin-top margin-bottom">身份验证信息 <span id="checkTips" class="">(以下三种信息不可同时为空)</span></div>
						<div class="line">
							<div class="x5">
								<div class="form-group">
									<div class="label">
										<label>微信号</label>
									</div>
									<div class="field">
										<input type="text" class="input" id="personWeixinid" data-validate="length#<=32:不能超过32个字" placeholder="若与员工扫描的微信匹配，则允许关注"/>
									</div>
								</div>
							</div>
							<div class="x1"></div>
							<div class="x6">
								<div class="form-group">
									<div class="label">
										<label>手机</label>
									</div>
									<div class="field">
										<input type="text" class="input" id="personMobile" data-validate="mobile:手机号码格式不对" placeholder="若该手机对应的微信与员工扫描的微信匹配，则允许关注" />
									</div>
								</div>
							</div>
						</div>
						<div class="line">
							<div class="x5">
								<div class="form-group">
									<div class="label">
										<label>邮箱</label>
									</div>
									<div class="field">
										<input type="text" class="input" id="personEmail" 
										placeholder="若未匹配到员工的微信，则通过邮箱来验证身份" data-validate="email:邮箱格式不对,length#<=32:不能超过32个字" />
									</div>
								</div>
							</div>
						</div>
						<hr/>
						<div class="line">
							<div class="x5">
								<div class="form-group">
									<div class="label">
										<label>
										所在部门
										<span id="deptTips" class="text-red" style="display: none;font-weight: normal;"> (必须至少选择一个)</span>
										</label>
									</div>
									<div class="field">
										<div class="zTreeDemoBackground left">
											<ul id="personTree" class="ztree"></ul>
										</div>
									</div>
								</div>
							</div>
							<div class="x1"></div>
							<div class="x6">
								<div class="form-group">
									<div class="label">
										<label>职位</label>
									</div>
									<div class="field">
										<input type="text" class="input" id="personPosition" 
										placeholder="请填写职位" data-validate="length#<=32:不能超过32个字" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="dialog-foot">
					<button id="person-save" type="button" class="button bg-green">保存</button>
					<button id="person-cancel" type="button" class="button dialog-close">关闭</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div id="find-body" style="display: none;">
	<div class="dialog-mask" style="z-index:10000"></div>
	<div class="dialog-win" style="position:fixed; width:500px; z-index:10001; left:50%; top:50%;margin-left: -250px;margin-top: -215px; ">
		<div class="dialog open">
			<form id="find-form" class="form">
				<div class="dialog-head">
					<span id="find-close" class="close"></span>
					<strong id="find-title">查看成员信息</strong>
				</div>
				<div class="dialog-body">
					<div id="find-content" style="height: 300px; overflow: auto;"></div>
				</div>
				<div class="dialog-foot">
					<button id="find-invite" onclick="inviteUser()" type="button" class="button bg-green">邀请关注</button>
					<button id="find-disabled" onclick="disabledUser()" type="button" class="button bg-red">冻结</button>
					<button id="find-cancel" type="button" class="button dialog-close">关闭</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div id="send-body" style="display: none;">
	<div class="dialog-mask" style="z-index:10000"></div>
	<div class="dialog-win" style="position:fixed; width:500px; z-index:10001; left:50%; top:50%;margin-left: -250px;margin-top: -165px; ">
		<div class="dialog open">
			<form id="send-form" class="form">
				<div class="dialog-head">
					<span id="send-close" class="close"></span>
					<strong id="send-title">发送邀请信息</strong>
				</div>
				<div class="dialog-body">
					<div id="send-content" style="height:200px;padding-top:30px; overflow: auto;">
						<div class="form-group">
							<div class="label">
								<label>发送给<span id="send-user"></span>的提示语</label>
							</div>
							<div class="field">
								<textarea class="input" id="inviteTips" placeholder="请填写推送到微信或者手机的提示语"></textarea>
								注意：企业认证号优先使用微信推送邀请关注，若没有填写微信号或者手机，则通过邮件邀请关注。
								非企业认证号只通过邮件邀请关注。
							</div>
						</div>
					</div>
				</div>
				<div class="dialog-foot">
					<button id="send-save" type="button" class="button bg-green">发送</button>
					<button id="send-cancel" type="button" class="button dialog-close">关闭</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div id="import-body" style="display: none;">
	<div class="dialog-mask" style="z-index:10000"></div>
	<div class="dialog-win" style="position:fixed; width:500px; z-index:10001; left:50%; top:50%;margin-left: -250px;margin-top: -165px; ">
		<div class="dialog open">
			<form id="import-form" class="form">
				<div class="dialog-head">
					<span id="import-close" class="close"></span>
					<strong>批量导入</strong>
				</div>
				<div class="dialog-body">
					<div id="import-content" style="height:150px;overflow: auto;">
						<div class="form-group">
							<div class="label">
								<label>&nbsp;</label>
							</div>
							<div class="field">
								请先<a href="javascript:void(0);" id="downloadTemplate" class="text-blue">下载标准模板</a>，再按照提供的标准模板填写通讯录的信息
							</div>
						</div>
						<div class="form-group">
							<div class="label">
								<label>&nbsp;</label>
							</div>
							<div class="field line" style="height: 45px;">
								<div class="x3">
									<a id="upload-file-btn" href="javascript:;" class="button bg pick-btn" style="border: 0;padding: 0;">选择文件</a>
								</div>
								<div class="x9"  style="height: 45px;line-height: 45px;">
									<span id="upload-file-name"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="dialog-foot">
					<button id="import-save" type="button" class="button bg-green">确定</button>
					<button id="import-cancel" type="button" class="button dialog-close">关闭</button>
				</div>
			</form>
		</div>
	</div>
</div>

</body>
</html>